<template>
  <div class="data-info home-section">
    <div class="tab-item home-title">数据集</div>
    <div class="tabs">
      <span
        v-for="tab in tabList"
        :key="tab.value"
        class="tabs-item"
        :class="{ 'is-active': tab.value === active }"
        @click="activeClick(tab.value)"
        >{{ tab.label }}</span
      >
    </div>
    <div class="grid-cards">
      <div
        v-for="(card, index) in currList"
        :key="card.id"
        class="card"
        :style="{ 'grid-area': `item${index + 1}` }"
      >
        <div class="card-top">
          <span class="card-title">{{ card.elementTitle }}</span>
          <router-link
            :to="`/model/square/detail?id=${card.id}`"
            target="_blank"
          >
            <img
              src="@/assets/gradient-arrow.svg"
              class="cursor-pointer"
              alt=""
            />
          </router-link>
        </div>
        <p
          class="card-content"
          :style="{ '-webkit-line-clamp': index < 3 ? 5 : 3 }"
          v-html="card.remark"
        ></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDict } from "@/hooks";
import { DICT_MAP } from "@/const";

const active = ref("");
const activeClick = (value) => {
  active.value = value;
};

const { list: domainList } = useDict(DICT_MAP.element_domain);
const tabList = computed(() => domainList.value.slice(0, 4));

watch(
  () => tabList.value,
  (val) => {
    if (val.length) active.value = tabList.value[0].value;
  },
  {
    immediate: true,
  }
);

const list = ref({});
const currList = computed(() => list.value[active.value] || []);
const $api = inject("$api");
const getData = async (elementDomain) => {
  if (list.value?.[elementDomain]?.length) return;
  const { data: rows } = await $api.provide.getCustomerList({
    pageNum: 1,
    pageSize: 5,
    elementDomain,
    elementShareType: 1,
    elementType: 1,
    status: 1,
  });
  list.value[elementDomain] = rows;
};

watch(
  () => active.value,
  (val) => {
    getData(val);
  }
);
</script>

<style lang="less" scoped>
.data-info {
  padding: 34px 0 60px;
  background: url("/data-bg.png") no-repeat center;
  background-size: cover;
  .home-title {
    margin-bottom: 24px;
  }
}
.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  &-item {
    font-size: 18px;
    line-height: 26px;
    color: @text-light;
    margin-right: 54px;
    cursor: pointer;
    &:last-child {
      margin: 0;
    }
    &.is-active {
      color: @text-default;
      font-weight: 600;
    }
  }
}
.grid-cards {
  display: grid;
  width: 968px;
  gap: 16px;
  grid-template-areas:
    "item1 item1 item2 item2 item3 item3"
    "item4 item4 item4 item5 item5 item5";
  .card {
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    box-shadow: 0px -4px 18px 0px rgba(0, 0, 0, 0.1);
    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .card-title {
        font-size: 20px;
        font-weight: 500;
        color: @text-default;
        flex: 1;
        margin-right: 20px;
        .single-overflow;
      }
      img {
        width: 14px;
        height: 14px;
      }
    }
    &-content {
      margin-top: 24px;
      font-size: 14px;
      color: @text-light!important;
      line-height: 27px;
      :deep(p span) {
        color: inherit !important;
      }
      .multiline-overflow(3);
    }
  }
}
</style>
